<template>
  <div>
    <div v-for="item in tableData" class="MVBox" v-loading="loading">
      <img :src="item.coverUrl" alt="" class="img" @click="toMVPlayPage(item)" />
      {{ item.title }}
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { search } from "@/service/songs";
import { storage } from "../../stores/storage";
import router from "../../router";
export default defineComponent({
  mounted() {
    this.searchFun();
  },
  setup() {
    let store = storage();
    let tableData = ref([]);
    const loading = ref(true);
    const { searchKeyword, searchType } = storeToRefs(store);
    function toMVPlayPage(item) {
      store.setMVId(item.vid);
      router.push({
        path: "/mvplay",
      });
    }
    function searchFun() {
      search(searchKeyword.value, searchType.value)
        .then((res) => {
          if (res.status === 200 && res.data.code === 200) {
            let data = res.data.result.videos;
            for (let i = 0; i < data.length; i++) {
              tableData.value[i] = {};
              tableData.value[i].vid = data[i].vid;
              tableData.value[i].title = data[i].title;
              tableData.value[i].coverUrl = data[i].coverUrl;
            }
            loading.value = false;
          } else {
            ElMessage("数据获取失败");
          }
        })
        .catch((res) => {
          ElMessage("网络错误");
        });
    }
    return {
      searchFun,
      tableData,
      toMVPlayPage,
      loading,
    };
  },
});
</script>

<style scoped>
.img {
  width: 200px;
  height: 120px;
  background-size: cover;
  border-radius: 10px;
  transition: 0.5s;
}
.img:hover {
  transform: scale(0.9);
  cursor: pointer;
}
.MVBox {
  width: 200px;
  height: 120px;
  float: left;
  margin: 30px 25px;
}
</style>
